<template>
	<view v-show="data">
		<view class="gold-card">
			<image class="bg-img" src="/static/images/bg.png"></image>
			<image class="bg-sidai" src="/static/images/sidai.png"></image>
			<view class="title">专业解答，0服务费全程看房</view>
			<view class="info u-flex">
				<image :src="imgUrl(data.avatar)" />
				<view class="info-wrap u-flex-1">
					<view class="top-title u-flex">
						<view class="name">{{data.nickname}}</view>
						<view class="type">房联</view>
						<view class="score">{{Number(data.score)}}</view>
					</view>
					<view class="label u-flex">
						<view v-for="(i,index) in data.admin_tag_ids" :key="index">{{i}}</view>
					</view>
					<view class="phone">
						<u-icon color="#111" size="32" name="phone-fill"></u-icon>
						<text class="text">{{data.phone}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"gold-card",
		data() {
			return {
				
			}
		},
		props:['data']
	}
</script>

<style lang="scss" scoped>
	.gold-card{height: 414rpx;position: relative;width: 700rpx;margin: 0 auto 0;
		.bg-img{width: 100%;display: block;position: absolute;left: 0;top: 0;height: 100%;}
		.bg-sidai{width: 150rpx;height: 155rpx;position: relative;top: -10rpx;left: 30rpx;}
		.title{position: absolute;transform: translateX(-50%);left: 50%;background-color: #302e31;color: #fff8c2;font-size: 28rpx;padding: 10rpx 30rpx;border-radius: 100rpx;white-space: nowrap;top: 50rpx;}
		.info{
			position: relative;padding: 0 60rpx;
			image{flex-shrink: 0;width: 150rpx;height: 150rpx;border-radius: 50%;margin-right: 20rpx;}
			.info-wrap{
				.top-title{
					.name{font-size: 32rpx;font-weight: bold;color: #000;margin-right: 14rpx;}
					.type{background-color: #4edcc5;color: #fff;font-size: 24rpx;padding: 2rpx 10rpx;border-radius: 6rpx;margin-right: auto;}
					.score{color: #f00;font-size: 32rpx;font-weight: bold;}
				}
				.label{
					padding: 20rpx 0;flex-wrap: wrap;color: #666;
					view{border: 1rpx solid #999;font-size: 20rpx;border-radius: 8rpx;padding: 4rpx 10rpx;margin-right: 10rpx;margin-top: 4rpx;
						&:last-child{margin-right: 0;}
					}
				}
				.phone{font-weight: bold;font-size: 30rpx;
					.text{margin-left: 14rpx;}
				}
			}
		}
	}
</style>
